<template>
	<view class="product-item">
		<image :src="item.pic" mode="aspectFill"></image>
		<view class="txt">
			<text class="title clamp">{{item.title}}</text>
			<text class="attr-box">{{item.spData}}</text>
			<view class="price-box">
				<text class="price">￥{{item.price}}</text>
				<text class="number">x {{item.number}}</text>
			</view>
			<text class="note" v-if="item.orderNote">备注：{{item.orderNote}}</text>
		</view>
	</view>
</template>

<script>
export default {
	name:"product-order",
	props: {
		// 列表数据
		item: {
			type: Object,
			default () {
				return {
					pic: "",
					title: "",
					spData: "",
					number: 0,
					price: 0
				};
			}
		},
	},
	data() {
		return {
			
		};
	},
	methods: {
		
	}
}
</script>

<style lang="scss">
	
.product-item {
	display: flex;
	flex-direction: row;
	width: 100%;
}

image {
	display: block;
	width: 160upx;
	height: 160upx;
	border-radius: 20upx;
}

.txt {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 0 30upx 0 24upx;
	overflow: hidden;
	
	.title {
		font-size: $uni-font-size-lg;
		color: $uni-text-color-dark;
		line-height: 1;
	}
	
	.attr-box {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-light;
		padding: 10upx 0upx;
	}
	
	.price-box {
		font-size: $uni-font-size-base;
		padding-top: 10upx;
	
		.price {
			color: $uni-text-color-red;
		}
	
		.number {
			margin-left: 20upx;
			font-size: $uni-font-size-sm;
		}
	}
	
	.note {
		font-size: $uni-font-size-base;
		color: $uni-text-color-dark;
	}
	
}	

</style>
